<template>
    <div>
        <navigationBar :backType="2" :bgType="0" navigationTitle="用户登录" />
        <view class="wrap-img-bg">
            <image
                class="img-top"
                :src="getImageURL('technician/login/bg_top.png')"
            />
            <image
                class="img-bottom"
                :src="getImageURL('technician/login/bg_bottom.png')"
            />
        </view>

        <view class="wrap flex column align-center">
            <image class="logo" :src="logo" />

            <image
                class="logo-title"
                :src="getImageURL('technician/login/logo_title.png')"
            />

            <view
                class="login-btn flex align-center just-center"
                @click="onLogin"
            >
                <image :src="getImageURL('technician/login/login_wx.png')" />
                <view class="f-36"> 微信登录 </view>
            </view>

            <view class="agree-bg flex align-center">
                <view
                    class="choose flex align-center just-center"
                    @click="isAgree = !isAgree"
                >
                    <image
                        v-if="isAgree"
                        :src="getImageURL('technician/login/choose_select.png')"
                    />
                    <image
                        v-else
                        :src="getImageURL('technician/login/choose_normal.png')"
                    />
                </view>
                <view class="agree f-24">
                    <text>勾选后表示阅读并同意</text>
                    <text @click="onAgree(1)">《用户协议》</text>
                    <text>和</text>
                    <text @click="onAgree(0)">《隐私协议》</text>
                </view>
            </view>
        </view>
    </div>
</template>

<script>
import { login } from "@/API/login.js";
export default {
    data() {
        return {
            logo: this.$stoarge.getInitData()["logo"],

            isAgree: false, //是否同意协议
        };
    },
    onLoad() {
        let code = this.getCurrentPathParams("code", 0);
        if (code !== 0) {
            this.authenLogin(code);
        }
    },
    methods: {
        /**
         * 获取code
         */
        getCurrentPathParams(name, value) {
            var newObj = this.getCurrentLinkParams();
            var result = newObj[name];
            if (result == undefined) {
                result = value;
            }
            try {
                result = decodeURIComponent(result);
            } catch (e) {}
            return result;
        },
        /**
         * 获取路径
         */
        getCurrentLinkParams() {
            var url = location.search;
            var newObj = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    newObj[strs[i].split("=")[0]] = strs[i].split("=")[1];
                }
            }
            return newObj;
        },
        /**
         * 授权登录
         */
        authenLogin(code) {
            login(code).then((res) => {
                this.$stoarge.setToken(res.data.token);
                this.$st.success("登录成功", () => {
                    if (uni.getStorageSync("dealer_id")) {
                        uni.redirectTo({
                            url:
                                "/subPages/technician/recruit/JoinUs?dealer_id=" +
                                uni.getStorageSync("dealer_id"),
                        });
                        return;
                    }
                    uni.navigateTo({ url: "/subPages/technician/tabBar/home" });
                });
                uni.setStorageSync("___token___", res.data.token);
            });
        },
        /**
         * 登录
         */
        onLogin() {
            if (this.isAuthen) {
                return;
            }
            if (!this.isAgree) {
                this.$st.show("请阅读并同意用户协议和隐私协议");
                return;
            }
            // const appID = this.$stoarge.getInitData()["appid"];
            // const callBackURL = window.location.protocol + "//" + window.location.host + "/#/pages/login/login";

            // const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=${encodeURIComponent(
            // 	callBackURL
            // )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

            const url =
                window.location.protocol +
                "//" +
                window.location.host +
                "/api/user.login/H5Login";
            window.location.replace(url);
        },
        onAgree(type) {
            uni.navigateTo({
                url: "/subPages/technician/recruit/rich?type=" + type,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-img-bg {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #212737;

    .img-top {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 842rpx;
        z-index: 2;
    }
    .img-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 318rpx;
        z-index: 2;
    }
}

.wrap {
    position: relative;
    z-index: 3;
    .logo {
        margin-top: 150rpx;
        width: 178rpx;
        height: 178rpx;
        border-radius: 20rpx;
        overflow: hidden;
    }

    .logo-title {
        margin-top: 60rpx;
        width: 612rpx;
        height: 162rpx;
    }

    .login-btn {
        margin-top: 135rpx;
        width: 664rpx;
        height: 110rpx;
        border-radius: 55rpx;
        overflow: hidden;
        background-color: white;

        > image {
            width: 64rpx;
            height: 52rpx;
        }
        > view {
            margin-left: 32rpx;
            color: $theme-color;
        }
    }

    .agree-bg {
        margin-top: 70rpx;

        .choose {
            width: 28rpx;
            height: 28rpx;

            > image {
                width: 28rpx;
                height: 28rpx;
            }
        }

        .agree {
            margin-left: 10rpx;
            color: white;
        }
    }
}
</style>
